<template>
	<div class="container">
		<a-row :gutter="20" justify="end" class="icon">
			<a-col :span="2" class="py-4 text-center">
				<a-space>
					<a-button @click="close()">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
		<h1 style="text-align: center;font-weight: bold;margin-bottom: 20px;">{{ planInfo.name }}详情</h1>
		<a-form>
			<div class="flex">
				<a-form-item label="项目名称" class="flex-auto">{{ planInfo.project?.name }}</a-form-item>
				<a-form-item label="计划名称" class="flex-auto">{{ planInfo.name }}</a-form-item>
			</div>

			<div class="flex">
				<a-form-item label="计划编号" class="flex-auto">{{ planInfo.code }}</a-form-item>
				<a-form-item label="附件" class="flex-auto">
					<p v-for="(item) in planInfo.file_path" :key="item.url">
						<a v-if="item.url" :href="item.url" target="_blank">{{ item.name }}</a>
					</p>
				</a-form-item>
			</div>
			<div>
				备注: {{ planInfo.memo }}
			</div>
		</a-form>

		<a-table :data-source="planInfo.materials" :columns="columns" :pagination="false">
			<!-- <template #bodyCell="{ column, record }">
				<template v-if="column.key === 'flowStatus'">
					<div>
						<flow-model
							:module-id="'planDetailInfo'"
							:item-id="record.id"
							@change="changeFlowStatusData2"
						></flow-model>
					</div>
				</template>
</template>-->
		</a-table>
		<h2 style="margin-bottom: 12px;">总控计划的发起申请人</h2>
		<a-workflow v-if="planInfo.id" v-model:status="planInfo.workflow_status" module="plan" :target-id="planInfo.id" :project-id="planInfo.project_id" :code="planInfo.code" :user-id="planInfo.opr_id" :extra="true" :steps="true" @submit="(e) => console.log(e)"></a-workflow>
		<a-row :gutter="20">
			<a-col :span="24" class="py-4 text-center">
				<a-space>
					<a-button @click="close()">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { ref, computed, reactive, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import { post } from "../utils";
import { AWorkflow } from "@/components/index.js";
import { CloseOutlined } from '@ant-design/icons-vue'
const route = useRoute();
const router = useRouter()

const pointData = ref([]);
const planInfo = ref([]);
// 编辑主计划
post("plan/info", { id: route.params.id }).then(data => {
	data.materials = data.materials.map((d, i) => {
		d.key = i;

		const { unit, quantity } = d.PlanMaterial;
		d.unit = unit;
		d.quantity = quantity;

		return d;
	});
	const searchState = reactive({ ids: 0 });
	const changeflowStatus = e => {
		if (e && searchState) {
			searchState.ids = e.ids;
			if (searchState.ids) {
				initData();
			}
		}
	};
	const initData = () => {
		// 搜索回调触发
	};

	data.file_path = data?.file_path ? JSON.parse(data.file_path) : [];

	planInfo.value = data;
	//构建工号
	post("department/info", { id: data.project_id }).then(d => {
		//获取工号
		pointData.value = d.pointData;
	});
});
const columns = computed(() => {
	const columns = [
		{
			title: "ID",
			dataIndex: "key",
			width: 60,
			align: "center",
			extra: 0,
			customRender: ({ text, record, index, column }) => {
				return text + 1;
			}
		},
		{
			title: "材料名称",
			dataIndex: "name",
			width: 150,
			extra: 0
		},
		{
			title: "材料规格",
			dataIndex: "model",
			width: 150,
			extra: 0
		},
		{
			title: "单位",
			dataIndex: "unit",
			width: 150,
			extra: 0,
			align: "center"
		},
	];
	pointData.value.forEach((p, i) => {
		columns.push({
			title: p.name,
			dataIndex: `gonghao_${p.id}`,
			extra: p.id,
			align: "center",
			width: 120
		});
	});
	columns.push({
		title: "总数",
		dataIndex: "quantity",
		width: 120,
		extra: 0,
		align: "center"
	});
	return columns;
});
// const closeTab = inject("closeTab");
function closeTab() {
	window.history.back()
}
// 返回上个页面
function close() {
	router.go(-1)
}
</script>

<style scoped lang="scss">
.container {
	background-color: white;
	padding: 24px;
	.icon{
		color: #1890ff;
		font-size: 30px;
	}
}
</style>
